<template>
   <diiv class="main">
    <el-tabs type="card">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color=""
             active-text-color="#00aff0" style="margin-bottom:10px">
            <el-menu-item index="1" class="labelcolor" @click='changeMain("PoudList")'><div class="groupC">我的磅单</div></el-menu-item>
            <el-menu-item index="2" class="labelcolor" @click='changeMain("ErrorList")'><div class="groupC">异常磅单</div></el-menu-item>
        </el-menu>
    <el-row>
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="磅单编号">
            <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="要货工地">
            <el-select v-model="form.region" placeholder="请选择要货工地">
            <el-option label="工地A" value="A"></el-option>
            <el-option label="工地B" value="B"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="货物名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-col :span="11">
            <el-date-picker type="date" placeholder="请选择时间范围起始" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" offset="1">---</el-col>
            <el-col :span="11">
            <el-date-picker type="date" placeholder="请选择时间范围终止" v-model="form.date2" style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button class="remerber" icon="el-icon-search" @click="onSubmit" style="margin-left:40%">搜索</el-button>
        </el-form-item>
        </el-form>
    </el-row>
    <el-row>
        <component :is="currentComponent"></component>
    </el-row>
    </el-tabs>
  </diiv> 
</template>
<script>
export default {
    inject:["reload"],
    data() {
      return {
          activeIndex:'1',
        currentComponent:"PoudList",
        form: {
          id: '',
          region: '',
          name: '',
          date1: '',
          date2: ''
        }
      };
    },
    components: {
        PoudList(resolve) {require(["./PoudList.vue"], resolve); },
        ErrorList(resolve) {require(["./ErrorList.vue"], resolve); }
        // ，组件名(resolve) {require(["./组件名.vue"], resolve); }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      onSubmit() {
        console.log('submit!');
      },
      changeMain:function(obj){
            this.currentComponent = obj;
        }
    }
}
</script>
<style src="../style/mine.css">

</style>